<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'添加信息'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem ">
            <p class="analyItemTit tx-center">基本资料</p>
            <div class="analyItemCon input100">
                <p class="fl col-md-6">
                    <span class="cLightGray pr8 width56s">姓名</span>
                    <span>
                        <input class="widthB60" type="text" v-model=name>
                    </span>
                </p>
                <p class="fl col-md-6 ">
                    <span class="cLightGray pr8 width56s">手机号</span>
                    <span>
                        <input class="widthB60" type="text" v-model="phone">
                        <!-- <el-input type="text" stype="width: 50px;"   placeholder="请输入手机号" v-model="phone" maxlength="11" show-word-limit blur></el-input> -->
                        </span>
                </p>
                <p class="fl col-md-6 mt10">
                    <span class="cLightGray pr8 width56s">性别</span>
                    <span style="display: inline-block;" class="widthB60">
                                    <label  class="uiRadio12"><input v-model="sex" value="1" type="radio" name="u_sex" class="uiRadio12-input">男</label>
                                    <label class="uiRadio12"><input v-model="sex" value="0" type="radio" name="u_sex" class="uiRadio12-input">女</label>
                                </span>
                </p>
                <p class="fl col-md-6 mt10">
                    <span class="cLightGray pr10 width56s">微信</span>
                    <span class="pl10">
                        <input class="widthB60" type="text" v-model="weChat">
                       </span>
                </p>
                <p class="fl col-md-10 cRed phoneChong" style="display: none;">手机号重复</p>
            </div>
        </div>
       <div class="analyItem ">
            <p class="analyItemTit tx-center">行业经验</p>
            <div class="analyItemCon input100">
                <p class="fl col-md-4">
                    <span class="cLightGray pr8" style="width: 76px;">工种</span><span>
                                    <select v-model="workType" class="widthB60" style="width: 65%;" id="self_job1">
                                        <option ng-repeat="li in gongzhong" value="1" class="ng-binding ng-scope">瓦工</option>
                                        <option ng-repeat="li in gongzhong" value="2" class="ng-binding ng-scope">木工</option>
                                        <option ng-repeat="li in gongzhong" value="3" class="ng-binding ng-scope">油工</option>
                                        <option ng-repeat="li in gongzhong" value="4" class="ng-binding ng-scope">电工</option>
                                        <option ng-repeat="li in gongzhong" value="5" class="ng-binding ng-scope">暖通</option>
                                        <option ng-repeat="li in gongzhong" value="6" class="ng-binding ng-scope">焊工</option>
                                        <option ng-repeat="li in gongzhong" value="7" class="ng-binding ng-scope">壮工</option>
                                        <option ng-repeat="li in gongzhong" value="8" class="ng-binding ng-scope">安装</option>
                                        <option ng-repeat="li in gongzhong" value="9" class="ng-binding ng-scope">拆除</option>
                                        <option ng-repeat="li in gongzhong" value="10" class="ng-binding ng-scope">搬运</option>
                                        <option ng-repeat="li in gongzhong" value="11" class="ng-binding ng-scope">家具</option>
                                        <option ng-repeat="li in gongzhong" value="12" class="ng-binding ng-scope">弱电</option>
                                        <option ng-repeat="li in gongzhong" value="13" class="ng-binding ng-scope">水暖成品安装</option>
                                        <option ng-repeat="li in gongzhong" value="14" class="ng-binding ng-scope">电气成品安装</option>
                                        <option ng-repeat="li in gongzhong" value="88" class="ng-binding ng-scope">装饰成品安装</option>
                                        <option ng-repeat="li in gongzhong" value="100" class="ng-binding ng-scope">其他</option>
                                        <option ng-repeat="li in gongzhong" value="15" class="ng-binding ng-scope">水工</option>
                                        <option ng-repeat="li in gongzhong" value="16" class="ng-binding ng-scope">经理</option>
                                    </select>
                                </span>
                </p>
                <p class="fl col-md-4">
                    <span class="cLightGray pr8" style="width: 76px;">经验</span><span>
                                    <select v-model="experience" class="widthB60" style="width: 60%;" id="u_jingyan">
                                        <option value="1">有经验</option>
                                        <option value="0">无经验</option>
                                    </select>
                                </span>
                </p>
                <p class="fl col-md-4">
                    <span class="cLightGray pr8" style="width: 76px;">年限</span>
                     <span>
                         <input class="widthB60" type="text" v-model="year"   style="width: 60%;">
                        </span>
                </p>
                <textarea v-model="jianShu" placeholder="简述经历" style="width: 415px; margin-top: 5px;" id="u_jingli"></textarea>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">渠道</p>
            <div class="analyItemCon">
                <p class="col-md-4 ">
                    <label class="uiRadio12" style="padding: 0;"><input v-model="channel" value="1"  type="radio" name="u_qudao" class="uiRadio12-input" style="margin-left: 0;" data-id="1">百度</label>
                </p>
                <p class="col-md-4 ">
                    <label class="uiRadio12" style="padding: 0;"><input v-model="channel" value="2"  type="radio" name="u_qudao" class="uiRadio12-input" style="margin-left: 0;" data-id="3">58</label>
                </p>
                <p class="col-md-4">
                    <label class="uiRadio12" style="padding: 0;"><input v-model="channel" value="3" type="radio" name="u_qudao" class="uiRadio12-input" style="margin-left: 0;" data-id="4">赶集</label>
                </p>
                <p class="col-md-4">
                    <label class="uiRadio12" style="padding: 0;"><input v-model="channel" value="5" type="radio" name="u_qudao" class="uiRadio12-input" style="margin-left: 0;" data-id="11">介绍</label>
                </p>
                <p class="col-md-4">
                    <label class="uiRadio12" style="padding: 0;"><input v-model="channel" value="4" type="radio" name="u_qudao" class="uiRadio12-input" style="margin-left: 0;" data-id="100">其他</label>
                </p>
            </div>
        </div>
        <div class="analyItem ">
            <p class="analyItemTit tx-center">来源</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <label class="uiRadio12" style="padding: 0;"><input  v-model="source" value="1" type="radio" name="u_laiyuan" class="uiRadio12-input" style="margin-left: 0;" data-id="1">400电话</label>
                </p>
                <p class="col-md-4">
                    <label class="uiRadio12" style="padding: 0;"><input  v-model="source" value="2" type="radio" name="u_laiyuan" class="uiRadio12-input" style="margin-left: 0;" data-id="2">官网留言</label>
                </p>
                <p class="col-md-4">
                    <label class="uiRadio12" style="padding: 0;"><input  v-model="source" value="3" type="radio" name="u_laiyuan" class="uiRadio12-input" style="margin-left: 0;" data-id="3">官网注册</label>
                </p>
                <p class="col-md-4">
                    <label class="uiRadio12" style="padding: 0;"><input  v-model="source" value="4" type="radio" name="u_laiyuan" class="uiRadio12-input" style="margin-left: 0;" data-id="100">其他</label>
                </p>
            </div>
        </div>
        <div class="analyItem ">
            <p class="analyItemTit tx-center">所在地区</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <select id="projectSheng"  @change="shengChange()" class="widthB60" style="display: inline-block;width: 100px;">
                        <option value="">选择省</option>
                        <option  v-for="(item,index) in shengArry" :key="index" :data-code="item.code" :value="item.aid">{{item.name}}</option>
                    </select>
                </p>
                <p class="col-md-4">
                    <select id="city" name="s_city" style="display: inline-block;width: 100px;">
                            <option value="">选择市</option>
                        <option  v-for="(item,index) in shiArry" :key="index" :data-code="item.code" :value="item.aid">{{item.name}}</option>
                    </select>
                </p>
                <p class="col-md-4 ng-scope" ng-if="areaId == 39">
                    <select id="company" name="inductionArea" style="display: inline-block;width: 100px;" class="widthB60 inductionArea inductionArea2">
                          <option value="">选择分司</option>
                        <option  v-for="(item,index) in companyArry" :key="index"  :value="item.regionId">{{item.regionName}}</option>
                    </select>
                </p>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="fl col-md-9"></p>
                <div class="tx-center">
                    <input @click="submit" type="button" class="uiBtn-normal uiBtn-blue" value="确定">
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
import { GetRegionList, selectByMobile, GetAreaList, OperateAppUser, insertUserInfo } from '../Resources/Api/index'
export default {
    data () {
        return {
            name: '',
            phone: '',
            sex: '1',
            weChat: '',
            workType: '0',
            experience: '0', // 经验
            year: '0', // 年限
            jianShu: '', // 简述经历
            channel: 0, // 渠道
            channelInput: '', // 渠道
            source: 0, // 来源
            area: '', // 地区
            shengArry: [], // 省
            shiArry: [], //  市
            companyArry: [] // 分司

        }
    },
    created () {
        this.GetAreaList() // 省、市
        this.GetRegionList() // 分司
    },
    methods: {
        ...mapMutations({
            setUpdateLeft: `SET_UPDATE_LEFT`
        }),
        selectByMobile () {
            selectByMobile({mobile: this.phone}).then(results => {
                if (Number(results.data.StatusCode) === 0) {
                    if (results.data.Body === '此项目经理已存在') {
                        layer.msg('手机号已被注册')
                    }
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 点击确定
        submit () {
            // 获取省的名字
            var projectSheng = $('#projectSheng')
                .find('option:selected')
                .text()
            // 获取省的ID
            var projectShengId = $('#projectSheng').val()
            // 获取市的名字
            var city = $('#city')
                .find('option:selected')
                .text()
            // 获取市的ID
            var cityId = $('#city').val()
            // 获取分司的值
            var company = $('#company').val()
            // 获渠道值 u_channel
            if (this.channel) {
                if (Number(this.channel) === 1) {
                    this.channelInput = '百度'
                } else if (Number(this.channel) === 2) {
                    this.channelInput = '58'
                } else if (Number(this.channel) === 3) {
                    this.channelInput = '赶集'
                } else if (Number(this.channel) === 5) {
                    this.channelInput = '介绍'
                } else if (Number(this.channel) === 4) {
                    this.channelInput = '其他'
                }
            } else {
                layer.msg('请选择渠道')
                return
            }

            if (this.phone === '') {
                layer.msg('请输入手机号')
                return
            } else if (this.name === '') {
                layer.msg('请输入姓名')
                return
            } else if (this.sex === '') {
                layer.msg('请选择性别')
                return
            } else if (cityId === '' || company === '' || projectShengId === '') {
                layer.msg('请选择地区')
                return
            }
            var sexName = null
            var sexx = null
            if (Number(this.sex) === 1) {
                sexName = '男'
                sexx = 1
            } else {
                sexName = '女'
                sexx = 0
            }
            // 1 / 先查询输入的手机号是否被注册
            selectByMobile({mobile: this.phone}).then(results => {
                if (Number(results.data.StatusCode) === 0) {
                    if (results.data.Body === '此项目经理已存在') {
                        layer.msg('手机号已被注册')
                    } else {
                        // 2/根据注册的信息返回该appId
                        let parms = {
                            workerYear: this.year,
                            experience: this.experience,
                            selfJob: this.workType,
                            u_name: this.name,
                            phone: this.phone,
                            sex: sexName,
                            weixin: this.weChat,
                            u_isjingyan: this.experience,
                            u_jyshijian: 0,
                            u_jingli: this.jianShu,
                            u_qudao: this.channel,
                            u_laiyuan: this.source,
                            u_sheng: projectSheng,
                            u_shengId: projectShengId, // 省id
                            u_shi: city,
                            u_shiId: cityId,
                            post: 4,
                            u_xian: null,
                            u_xianId: null,
                            u_ywyId: '00000079', // 卡号    写死值
                            u_ywy: '徐志林', // 操作人姓名 写死值
                            u_qudaoinput: this.channelInput,
                            region_id: company
                        }
                        OperateAppUser(parms).then((results) => {
                            if (Number(results.data.StatusCode) === 0) {
                                let params = {
                                    userName: this.name,
                                    mobile: this.phone,
                                    sex: sexx, // sexName,
                                    weChat: this.weChat,
                                    selfJob: this.selfJob,
                                    experience: this.experience,
                                    workerYear: this.workerYear,
                                    educationHistory: this.jianShu,
                                    channel: this.channel,
                                    dataSources: this.source,
                                    province: projectSheng,
                                    city: city,
                                    createuser: '徐志林',
                                    pmCard: '00000079',
                                    userType: 1,
                                    rsAppId: results.data.Body.app_id,
                                    inductionArea: Number(company),
                                    stId: 1
                                }
                                insertUserInfo(params).then((results) => {
                                    if (Number(results.data.StatusCode) === 0) {
                                        layer.msg('添加成功')
                                        this.setUpdateLeft()
                                    }
                                }).catch((error) => {
                                    console.log(error)
                                })
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                }
            }).catch(error => { console.log(error) })
        },
        // insertUserInfo (sexx, projectSheng, city, results, company) {
        //     // let params = {
        //     //     userName: this.name,
        //     //     mobile: this.phone,
        //     //     sex: sexx, // sexName,
        //     //     weChat: this.weChat,
        //     //     selfJob: this.selfJob,
        //     //     experience: this.experience,
        //     //     workerYear: this.workerYear,
        //     //     educationHistory: this.jianShu,
        //     //     channel: this.channel,
        //     //     dataSources: this.source,
        //     //     province: projectSheng,
        //     //     city: city,
        //     //     createuser: '徐志林',
        //     //     pmCard: '00000079',
        //     //     userType: 1,
        //     //     rsAppId: results.data.Body.app_id,
        //     //     inductionArea: Number(company),
        //     //     stId: 1
        //     // }
        //     insertUserInfo({
        //         userName: this.name,
        //         mobile: this.phone,
        //         sex: sexx, // sexName,
        //         weChat: this.weChat,
        //         selfJob: this.selfJob,
        //         experience: this.experience,
        //         workerYear: this.workerYear,
        //         educationHistory: this.jianShu,
        //         channel: this.channel,
        //         dataSources: this.source,
        //         province: projectSheng,
        //         city: city,
        //         createuser: '徐志林',
        //         pmCard: '00000079',
        //         userType: 1,
        //         rsAppId: results.data.Body.app_id,
        //         inductionArea: Number(company),
        //         stId: 1
        //     }).then((results) => {
        //         if (Number(results.data.StatusCode) === 0) {
        //             layer.msg('添加成功')
        //             this.setUpdateLeft()
        //         }
        //     }).catch((error) => {
        //         console.log(error)
        //     })
        // },
        // 获取省
        GetAreaList () {
            GetAreaList().then(results => {
                if (results.status === 200) {
                    this.shengArry = results.data
                }
            }).catch(error => { console.log(error) })
        },
        // 获取市
        shengChange () {
            let code = $('#projectSheng').find('option:selected').attr('data-code')
            GetAreaList({
                code: code
            }
            ).then(results => {
                if (results.status === 200) {
                    this.shiArry = results.data
                }
            }).catch(error => { console.log(error) })
        },
        // 分司
        GetRegionList () {
            GetRegionList().then(results => {
                if (results.data.StatusCode === 0) {
                    this.companyArry = results.data.Body
                }
            }).catch(error => { console.log(error) })
        }
    }
}
</script>
